/**
 * 抽出外部models 与 容器的部分，
 * @author leway
 * @date 2020-07-31
 */

import React, { useState, useEffect, useRef } from 'react';

import { Slider, DatePicker, Row, Col, Checkbox, message } from 'antd';
// import { CloseOutlined } from '@ant-design/icons';
import moment from 'moment';
// 引入arcgis 工具类库
import { viewUtils } from '@/utils/arcgis/index';
// 引入model
import { ConnectProps, ConnectState } from '@/models/connect';
import cls from 'classnames';
// 引入样式和图片
import './index.less';

const MARKS = {
  0: '上午0点',
  360: '上午6点',
  720: '中午12点',
  1080: '下午6点',
  1440: '下午12点',
};

/**
 * 根据当前时刻修改光照
 * @param {moment} curMoment
 */
const _changeEnvLight = async (curMoment: any) => {
  // todo 加截流
  // todo 加日期移动时拖动时间slider功能
  const cloneMoment = curMoment.clone();
  const view = await viewUtils.isViewReady();
  // 修改成时间戳
  view.environment.lighting.date = +cloneMoment.format('x');
};

// 日照分析组件
interface ILightshadowPure extends ConnectProps {
  // 当前激活的地图工具
  activeToolbar: any;

  className?: string;
  // 书签列表的样式
  style?: React.CSSProperties;
  // 播放按钮
  btnPlay?: React.ReactNode;
  // 暂停按钮
  btnPause?: React.ReactNode;
}
const LightshadowPure: React.FC<ILightshadowPure> = ({
  activeToolbar,
  style,
  btnPlay,
  btnPause,
  className,
}) => {
  const [isShowShadow, setIsShowShadow] = useState<any>(false);
  const [isSliderStop, setIsSliderStop] = useState<Boolean>(true);
  const [isDatePickerStop, setIsDatePickerStop] = useState<Boolean>(true);
  const [momentForLight, setMomentForLight] = useState(moment());
  const [sliderValue, setSliderValue] = useState<number>(0);
  const timerOfSlider = useRef<any>(null);
  const timerOfDatepicker = useRef<any>(null);

  // 重置timer
  const _resetTimers = () => {
    if (timerOfSlider.current) {
      clearInterval(timerOfSlider.current);
      timerOfSlider.current = null;
    }
    if (timerOfDatepicker.current) {
      clearInterval(timerOfDatepicker.current);
      timerOfDatepicker.current = null;
    }
  };

  // 解除挂载清除timer
  useEffect(() => {
    return _resetTimers;
  }, []);

  useEffect(() => {
    console.log(activeToolbar);
    setIsShowShadow(false);
    setIsDatePickerStop(true);
    setIsSliderStop(true);
    setMomentForLight(moment(new Date(), 'YYYY/MM/DD'));
    setSliderValue(moment().hour() * 60 + moment().minute());
    _resetTimers();
  }, [activeToolbar]);

  // 当日照分析到达24点时自动停止
  useEffect(() => {
    if (!isSliderStop && timerOfSlider.current && sliderValue > 1440) {
      clearInterval(timerOfSlider.current);
      setIsSliderStop(true);
    }
    // eslint-disable-next-line
  }, [sliderValue]);

  /**
   * 日期控件选择change事件
   */
  const handleDatePickerChange = (value: any) => {
    setMomentForLight(value);
    _changeEnvLight(value);
  };

  /**
   * 时间播放按钮回调
   */
  function handleSliderPlayClick() {
    if (!isDatePickerStop) {
      message.info('暂时不支持同时模拟');
      return;
    }
    if (sliderValue >= 1440) return;
    if (!isSliderStop) {
      // 播放中进行暂停操作
      clearInterval(timerOfSlider.current);
      setIsSliderStop(true);
      return;
    }
    //播放
    let curNum = sliderValue; // 闭包
    setIsSliderStop(false);
    timerOfSlider.current = setInterval(() => {
      let tempMoment = momentForLight
        .clone()
        .hour(curNum / 60)
        .minute(curNum % 60);
      _changeEnvLight(tempMoment);
      setSliderValue(() => (curNum += 10));
    }, 50);
  }

  // 日期播放按钮回调
  const handleDatepickerPlayClick = () => {
    if (!isSliderStop) {
      message.info('暂时不支持同时模拟');
      return;
    }
    if (!isDatePickerStop) {
      clearInterval(timerOfDatepicker.current);
      setIsDatePickerStop(true);
      return;
    }
    let curMoment = momentForLight.clone();
    setIsDatePickerStop(false);
    timerOfDatepicker.current = setInterval(() => {
      let tempMoment = curMoment.add(1, 'days');
      _changeEnvLight(tempMoment);
      setMomentForLight(tempMoment.clone());
    }, 100);
  };

  /**
   * 时间轴点击回调
   */
  const onSliderChange = (value: any) => {
    // 将传入的value转换为小时，分钟
    const tempTime2 = momentForLight.hour(value / 60).minute(value % 60);
    setMomentForLight(tempTime2);
    setSliderValue(value);
    _changeEnvLight(tempTime2);
  };

  /**
   * 显示阴影checkbox check事件回调
   */
  const onCheckBoxChange = async (e: any) => {
    setIsShowShadow(e.target.checked);
    const view = await viewUtils.isViewReady();
    view.environment.lighting.directShadowsEnabled = e.target.checked;
  };

  const playBtn = btnPlay || <img src={require('./images/play.png')} alt="播放" title="播放" />;
  const pauseBtn = btnPause || <img src={require('./images/stop.png')} alt="暂停" title="暂停" />;

  return (
    <div className={cls('geomap-widget-daylight', className)} style={style}>
      <div className="geomap-widget-daylight__daylightcontent-cols">
        <Row
          style={{
            marginBottom: '52px',
          }}
        >
          <Col span={24}>
            <Slider
              marks={MARKS}
              max={1440}
              defaultValue={sliderValue}
              tipFormatter={null}
              value={sliderValue}
              onChange={onSliderChange}
            />
          </Col>
        </Row>
        <Row
          style={{
            marginBottom: '32px',
          }}
        >
          <Col span={20} offset={1}>
            <span
              className="geomap-widget-daylight__daylightcontent-startbtn"
              onClick={handleSliderPlayClick}
            >
              开始
            </span>
          </Col>
        </Row>
        <Row
          style={{
            marginBottom: '32px',
          }}
        >
          <Col span={20}>
            <DatePicker
              showToday={false}
              allowClear={false}
              defaultValue={momentForLight}
              value={momentForLight}
              format="YYYY-MM-DD"
              onChange={handleDatePickerChange}
              className="geomap-widget-daylight__daylightcontent-datepicker"
            />
          </Col>
          <Col span={2} offset={1} className="geomap-widget-daylight__daylightcontent-datastartbtn">
            <span onClick={handleDatepickerPlayClick}>{isDatePickerStop ? playBtn : pauseBtn}</span>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Checkbox checked={isShowShadow} onChange={onCheckBoxChange}>
              显示阴影
            </Checkbox>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default LightshadowPure;
